.reflect-loading {
  display: flex;
  height: 100px;
  -webkit-box-reflect: below 0 linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7));
}

.reflect-loading li {
  width: 20px;
}

.reflect-loading li:nth-child(1) {
  background-color: #0099ff;
  animation: rotate 3s cubic-bezier(0.81, 0.04, 0.4, 0.7) infinite;
  animation-delay: 0ms;
}

.reflect-loading li:nth-child(2) {
  background-color: #0b93ff;
  animation: rotate 3s cubic-bezier(0.81, 0.04, 0.4, 0.7) infinite;
  animation-delay: 50ms;
}

.reflect-loading li:nth-child(3) {
  background-color: #178eff;
  animation: rotate 3s cubic-bezier(0.81, 0.04, 0.4, 0.7) infinite;
  animation-delay: 100ms;
}

.reflect-loading li:nth-child(4) {
  background-color: #2288ff;
  animation: rotate 3s cubic-bezier(0.81, 0.04, 0.4, 0.7) infinite;
  animation-delay: 150ms;
}

.reflect-loading li:nth-child(5) {
  background-color: #2d82ff;
  animation: rotate 3s cubic-bezier(0.81, 0.04, 0.4, 0.7) infinite;
  animation-delay: 200ms;
}

.reflect-loading li:nth-child(6) {
  background-color: #397dff;
  animation: rotate 3s cubic-bezier(0.81, 0.04, 0.4, 0.7) infinite;
  animation-delay: 250ms;
}

.reflect-loading li:nth-child(7) {
  background-color: #4477ff;
  animation: rotate 3s cubic-bezier(0.81, 0.04, 0.4, 0.7) infinite;
  animation-delay: 300ms;
}

.reflect-loading li:nth-child(8) {
  background-color: #4f71ff;
  animation: rotate 3s cubic-bezier(0.81, 0.04, 0.4, 0.7) infinite;
  animation-delay: 350ms;
}

.reflect-loading li:nth-child(9) {
  background-color: #5b6cff;
  animation: rotate 3s cubic-bezier(0.81, 0.04, 0.4, 0.7) infinite;
  animation-delay: 400ms;
}

.reflect-loading li:nth-child(10) {
  background-color: #6666ff;
  animation: rotate 3s cubic-bezier(0.81, 0.04, 0.4, 0.7) infinite;
  animation-delay: 450ms;
}

@keyframes rotate {
  0% {
    transform: rotate(-0.5turn) rotateX(-1turn);
  }
  75%,
  100% {
    transform: none;
  }
}
